<template>
    <div id="root">
        <el-container style="height: 100%;width: 100%;">
            <el-header style="height: 60px;">
                <el-button type="primary" @click="openConnectDlg">初始化连接</el-button>
                <el-button type="primary" @click="createFile" >生成文件</el-button>
            </el-header>
            <el-main>
                <el-collapse v-model="activeNames">
                    <el-collapse-item title="包路径参数" name="package">
                        <div width="100%">
                            <div class="tptItem">
                                <el-row>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple">
                                            <el-tooltip class="item" effect="dark" content="为空读取resource目录下" placement="top-start">
                                                <span icon="el-icon-thumb">模板路径: <i class="el-icon-thumb" ></i></span>
                                            </el-tooltip>
                                        </div>
                                    </el-col>
                                    <el-col :span="18">
                                        <div class="grid-content bg-purple-light">
                                            <el-input v-model="createInfo.templatePath" placeholder="请输入内容"></el-input>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="tptItem">
                                <el-row>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple">
                                            <span>文件夹路径: </span>
                                        </div>
                                    </el-col>
                                    <el-col :span="18">
                                        <div class="grid-content bg-purple-light">
                                            <el-input v-model="createInfo.folderPath" placeholder="请输入内容"></el-input>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="tptItem">
                                <el-row>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple">
                                            <span>packageName: </span>
                                        </div>
                                    </el-col>
                                    <el-col :span="18">
                                        <div class="grid-content bg-purple-light">
                                            <el-input v-model="createInfo.packageName" placeholder="请输入内容"></el-input>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="tptItem">
                                <el-row>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple">
                                            <span>pojoName: </span>
                                        </div>
                                    </el-col>
                                    <el-col :span="18">
                                        <div class="grid-content bg-purple-light">
                                            <el-input v-model="createInfo.pojoName" placeholder="请输入内容"></el-input>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="tptItem">
                                <el-row>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple">
                                            <span>pojoVoName: </span>
                                        </div>
                                    </el-col>
                                    <el-col :span="18">
                                        <div class="grid-content bg-purple-light">
                                            <el-input v-model="createInfo.pojoVoName" placeholder="请输入内容"></el-input>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="tptItem">
                                <el-row>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple">
                                            <span>pojoDtoName: </span>
                                        </div>
                                    </el-col>
                                    <el-col :span="18">
                                        <div class="grid-content bg-purple-light">
                                            <el-input v-model="createInfo.pojoDtoName" placeholder="请输入内容"></el-input>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="tptItem">
                                <el-row>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple">
                                            <span>mapperName: </span>
                                        </div>
                                    </el-col>
                                    <el-col :span="18">
                                        <div class="grid-content bg-purple-light">
                                            <el-input v-model="createInfo.mapperName" placeholder="请输入内容"></el-input>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="tptItem">
                                <el-row>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple">
                                            <span>mapperXmlName: </span>
                                        </div>
                                    </el-col>
                                    <el-col :span="18">
                                        <div class="grid-content bg-purple-light">
                                            <el-input v-model="createInfo.mapperXmlName" placeholder="请输入内容"></el-input>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="tptItem">
                                <el-row>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple">
                                            <span>serviceName: </span>
                                        </div>
                                    </el-col>
                                    <el-col :span="18">
                                        <div class="grid-content bg-purple-light">
                                            <el-input v-model="createInfo.serviceName" placeholder="请输入内容"></el-input>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="tptItem">
                                <el-row>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple">
                                            <span>serviceImplName: </span>
                                        </div>
                                    </el-col>
                                    <el-col :span="18">
                                        <div class="grid-content bg-purple-light">
                                            <el-input v-model="createInfo.serviceImplName" placeholder="请输入内容"></el-input>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="tptItem">
                                <el-row>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple">
                                            <span>controllerName: </span>
                                        </div>
                                    </el-col>
                                    <el-col :span="18">
                                        <div class="grid-content bg-purple-light">
                                            <el-input v-model="createInfo.controllerName" placeholder="请输入内容"></el-input>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="tptItem">
                                <el-row>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple">
                                            <span>作者名: </span>
                                        </div>
                                    </el-col>
                                    <el-col :span="18">
                                        <div class="grid-content bg-purple-light">
                                            <el-input v-model="createInfo.authorName" placeholder="请输入内容"></el-input>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>



                            <div class="tptItem">
                                <el-row>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple">
                                            <span>项目名: </span>
                                        </div>
                                    </el-col>
                                    <el-col :span="18">
                                        <div class="grid-content bg-purple-light">
                                            <el-input v-model="createInfo.projectName" placeholder="请输入内容"></el-input>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>


                            <div class="tptItem">
                                <el-row>
                                    <el-col :span="6">
                                        <div class="grid-content bg-purple">
                                            <span>CopyRight: </span>
                                        </div>
                                    </el-col>
                                    <el-col :span="18">
                                        <div class="grid-content bg-purple-light">
                                            <el-input v-model="createInfo.copyRightName" placeholder="请输入内容"></el-input>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>



                            <div>
                                <el-button type="success" @click="getTemplates">确定</el-button>
                            </div>
                        </div>
                    </el-collapse-item>
                    <el-collapse-item title="模板参数" name="template">
                        <div width="100%">

                            <div class="tptItem">
                                <el-row>
                                    <el-col :span="5">
                                        <div class="grid-content bg-purple">
                                            <el-tag v-if="createInfo.index" type="success">页面index</el-tag>
                                            <el-tag v-else type="info">页面index</el-tag>
                                        </div>
                                    </el-col>
                                    <el-col :span="16">
                                        <div class="grid-content bg-purple-light">
                                            <el-select v-model="createInfo.indexTpName" placeholder="请选择" :disabled="!createInfo.index">
                                                <el-option
                                                        v-for="item in tptList"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </el-col>
                                    <el-col :span="3">
                                        <div class="grid-content bg-purple">
                                            <el-switch
                                                    v-model="createInfo.index"
                                                    active-color="#13ce66"
                                                    inactive-color="#ff4949">
                                            </el-switch>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>

                            <div class="tptItem">
                                <el-row>
                                    <el-col :span="5">
                                        <div class="grid-content bg-purple">
                                            <el-tag v-if="createInfo.editForm" type="success">页面editForm</el-tag>
                                            <el-tag v-else type="info">页面editForm</el-tag>
                                        </div>
                                    </el-col>
                                    <el-col :span="16">
                                        <div class="grid-content bg-purple-light">
                                            <el-select v-model="createInfo.editFormTpName" placeholder="请选择" :disabled="!createInfo.editForm">
                                                <el-option
                                                        v-for="item in tptList"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </el-col>
                                    <el-col :span="3">
                                        <div class="grid-content bg-purple">
                                            <el-switch
                                                    v-model="createInfo.editForm"
                                                    active-color="#13ce66"
                                                    inactive-color="#ff4949">
                                            </el-switch>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>



                            <div class="tptItem">
                                <el-row>
                                    <el-col :span="5">
                                        <div class="grid-content bg-purple">
                                            <el-tag v-if="createInfo.pojo" type="success">pojo</el-tag>
                                            <el-tag v-else type="info">pojo</el-tag>
                                        </div>
                                    </el-col>
                                    <el-col :span="16">
                                        <div class="grid-content bg-purple-light">
                                            <el-select v-model="createInfo.pojoTptName" placeholder="请选择" :disabled="!createInfo.pojo">
                                                <el-option
                                                        v-for="item in tptList"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </el-col>
                                    <el-col :span="3">
                                        <div class="grid-content bg-purple">
                                            <el-switch
                                                    v-model="createInfo.pojo"
                                                    active-color="#13ce66"
                                                    inactive-color="#ff4949">
                                            </el-switch>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="tptItem">
                                <el-row>
                                    <el-col :span="5">
                                        <div class="grid-content bg-purple">
                                            <el-tag v-if="createInfo.pojoVo" type="success">pojoVo</el-tag>
                                            <el-tag v-else type="info">pojoVo</el-tag>
                                        </div>
                                    </el-col>
                                    <el-col :span="16">
                                        <div class="grid-content bg-purple-light">
                                            <el-select v-model="createInfo.pojoVoTptName" placeholder="请选择" :disabled="!createInfo.pojoVo">
                                                <el-option
                                                        v-for="item in tptList"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </el-col>
                                    <el-col :span="3">
                                        <div class="grid-content bg-purple">
                                            <el-switch
                                                    v-model="createInfo.pojoVo"
                                                    active-color="#13ce66"
                                                    inactive-color="#ff4949">
                                            </el-switch>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="tptItem">
                                <el-row>
                                    <el-col :span="5">
                                        <div class="grid-content bg-purple">
                                            <el-tag v-if="createInfo.pojoDto" type="success">pojoDto</el-tag>
                                            <el-tag v-else type="info">pojoDto</el-tag>
                                        </div>
                                    </el-col>
                                    <el-col :span="16">
                                        <div class="grid-content bg-purple-light">
                                            <el-select v-model="createInfo.pojoDtoTptName" placeholder="请选择" :disabled="!createInfo.pojoDto">
                                                <el-option
                                                        v-for="item in tptList"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </el-col>
                                    <el-col :span="3">
                                        <div class="grid-content bg-purple">
                                            <el-switch
                                                    v-model="createInfo.pojoDto"
                                                    active-color="#13ce66"
                                                    inactive-color="#ff4949">
                                            </el-switch>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="tptItem">
                                <el-row>
                                    <el-col :span="5">
                                        <div class="grid-content bg-purple">
                                            <el-tag v-if="createInfo.mapper" type="success">mapper</el-tag>
                                            <el-tag v-else type="info">mapper</el-tag>
                                        </div>
                                    </el-col>
                                    <el-col :span="16">
                                        <div class="grid-content bg-purple-light">
                                            <el-select v-model="createInfo.mapperTptName" placeholder="请选择" :disabled="!createInfo.mapper">
                                                <el-option
                                                        v-for="item in tptList"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </el-col>
                                    <el-col :span="3">
                                        <div class="grid-content bg-purple">
                                            <el-switch
                                                    v-model="createInfo.mapper"
                                                    active-color="#13ce66"
                                                    inactive-color="#ff4949">
                                            </el-switch>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="tptItem">
                                <el-row>
                                    <el-col :span="5">
                                        <div class="grid-content bg-purple">
                                            <el-tag v-if="createInfo.mapperXml" type="success">mapperXml</el-tag>
                                            <el-tag v-else type="info">mapperXml</el-tag>
                                        </div>
                                    </el-col>
                                    <el-col :span="16">
                                        <div class="grid-content bg-purple-light">
                                            <el-select v-model="createInfo.mapperXmlTptName" placeholder="请选择" :disabled="!createInfo.mapperXml">
                                                <el-option
                                                        v-for="item in tptList"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </el-col>
                                    <el-col :span="3">
                                        <div class="grid-content bg-purple">
                                            <el-switch
                                                    v-model="createInfo.mapperXml"
                                                    active-color="#13ce66"
                                                    inactive-color="#ff4949">
                                            </el-switch>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="tptItem">
                                <el-row>
                                    <el-col :span="5">
                                        <div class="grid-content bg-purple">
                                            <el-tag v-if="createInfo.service" type="success">service</el-tag>
                                            <el-tag v-else type="info">service</el-tag>
                                        </div>
                                    </el-col>
                                    <el-col :span="16">
                                        <div class="grid-content bg-purple-light">
                                            <el-select v-model="createInfo.serviceTptName" placeholder="请选择" :disabled="!createInfo.service">
                                                <el-option
                                                        v-for="item in tptList"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </el-col>
                                    <el-col :span="3">
                                        <div class="grid-content bg-purple">
                                            <el-switch
                                                    v-model="createInfo.service"
                                                    active-color="#13ce66"
                                                    inactive-color="#ff4949">
                                            </el-switch>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="tptItem">
                                <el-row>
                                    <el-col :span="5">
                                        <div class="grid-content bg-purple">
                                            <el-tag v-if="createInfo.serviceImpl" type="success">serviceImpl</el-tag>
                                            <el-tag v-else type="info">serviceImpl</el-tag>
                                        </div>
                                    </el-col>
                                    <el-col :span="16">
                                        <div class="grid-content bg-purple-light">
                                            <el-select v-model="createInfo.serviceImplTptName" placeholder="请选择" :disabled="!createInfo.serviceImpl">
                                                <el-option
                                                        v-for="item in tptList"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </el-col>
                                    <el-col :span="3">
                                        <div class="grid-content bg-purple">
                                            <el-switch
                                                    v-model="createInfo.serviceImpl"
                                                    active-color="#13ce66"
                                                    inactive-color="#ff4949">
                                            </el-switch>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="tptItem">
                                <el-row>
                                    <el-col :span="5">
                                        <div class="grid-content bg-purple">
                                            <el-tag v-if="createInfo.controller" type="success">controller</el-tag>
                                            <el-tag v-else type="info">controller</el-tag>
                                        </div>
                                    </el-col>
                                    <el-col :span="16">
                                        <div class="grid-content bg-purple-light">
                                            <el-select v-model="createInfo.controllerTptName" placeholder="请选择" :disabled="!createInfo.controller">
                                                <el-option
                                                        v-for="item in tptList"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </el-col>
                                    <el-col :span="3">
                                        <div class="grid-content bg-purple">
                                            <el-switch
                                                    v-model="createInfo.controller"
                                                    active-color="#13ce66"
                                                    inactive-color="#ff4949">
                                            </el-switch>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-collapse-item>
                    <el-collapse-item title="数据库表" name="tables">
                        <div width="100%">
                            <el-checkbox-group v-model="checkedTables">
                                <template v-for="(item, index) in tableList">
                                    <div class="tptItem">
                                        <el-checkbox :label="item.tableName"></el-checkbox>
                                    </div>
                                </template>
                            </el-checkbox-group>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </el-main>
        </el-container>

        <el-dialog
                title="数据库连接"
                :visible.sync="connectDlgVisible"
                width="50%"
        >

            <el-row :gutter="20">
                <el-col :span="8">
                    <span>数据库类型：</span>
                </el-col>
                <el-col :span="16">
                    <el-select v-model="connectInfo.dbType" placeholder="请选择数据库" @change="changeDbType">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <span>连接地址：</span>
                    </div>
                </el-col>
                <el-col :span="16">
                    <div class="grid-content bg-purple">
                        <el-input v-model="connectInfo.url" placeholder="请输入内容"></el-input>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <span>连接端口：</span>
                    </div>
                </el-col>
                <el-col :span="16">
                    <div class="grid-content bg-purple">
                        <el-input v-model="connectInfo.port" placeholder="请输入内容"></el-input>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <span>用户名：</span>
                    </div>
                </el-col>
                <el-col :span="16">
                    <div class="grid-content bg-purple">
                        <el-input v-model="connectInfo.username" placeholder="请输入内容"></el-input>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <span>密码：</span>
                    </div>
                </el-col>
                <el-col :span="16">
                    <div class="grid-content bg-purple">
                        <el-input v-model="connectInfo.password" placeholder="请输入内容"></el-input>
                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <span>数据库名称：</span>
                    </div>
                </el-col>
                <el-col :span="16">
                    <div class="grid-content bg-purple">
                        <el-input v-model="connectInfo.dbName" placeholder="请输入内容"></el-input>
                    </div>
                </el-col>
            </el-row>

            <div style="text-align: center;">
                <el-button type="success" @click="connect">连接</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {get, post} from "../utils/httpUtil";

    export default {
        name: "Index",
        data() {
            return {
                connectDlgVisible: false,
                connectInfo: {
                    url: 'localhost',
                    port: '3306',
                    dbName: '',
                    username: '',
                    password: '',
                    dbType: 'mysql8'
                },
                options: [{
                    value: 'mysql8',
                    label: 'mysql8'
                }, {
                    value: 'sqlserver',
                    label: 'sqlserver'
                }
                ],
                createInfo: {
                    index:false,
                    editForm:false,
                    pojo: false,
                    pojoVo: false,
                    pojoDto: false,
                    mapper: false,
                    mapperXml: false,
                    service: false,
                    serviceImpl: false,
                    controller: false,
                    indexTpName:'',
                    editFormTpName: '',
                    pojoTptName: '',
                    pojoVoTptName: '',
                    pojoDtoTptName: '',
                    mapperTptName: '',
                    mapperXmlTptName: '',
                    serviceTptName: '',
                    serviceImplTptName: '',
                    controllerTptName: '',
                    templatePath: "",
                    folderPath: 'D://temp',
                    packageName: 'com.xxx.demo',
                    pojoName: 'pojo',
                    pojoVoName: 'vo',
                    pojoDtoName: 'dto',
                    mapperName: 'mapper',
                    mapperXmlName: 'xml',
                    serviceName: 'service',
                    serviceImplName: 'impl',
                    controllerName: 'controller',
                    authorName: '',
                    projectName: '',
                    copyRightName: '',
                },
                tptList: [
                ],
                activeNames: [],
                tableList: [],
                checkedTables: []
            }
        },
        methods: {
            changeDbType(data){
                if (data == "mysql8") {
                    this.connectInfo = {
                        url: 'localhost',
                        port: '3306',
                        dbName: '',
                        username: '',
                        password: '',
                        dbType: 'mysql8'
                    }
                }else {
                    this.connectInfo = {
                        url: 'localhost',
                        port: '1433',
                        dbName: '',
                        username: '',
                        password: '',
                        dbType: 'sqlserver'
                    }
                }
            },
            openConnectDlg() {
                this.connectDlgVisible = true;
            },
            connect() {
                get("/database/initConnect", this.connectInfo).then(resp => {
                    if (resp.result) {
                        this.$notify({
                            title: '成功',
                            message: '初始化连接成功！',
                            type: 'success'
                        });
                        this.connectDlgVisible = false;
                        this.getTableList();
                    } else {
                        this.$notify.error({
                            title: '错误',
                            message: resp.msg
                        });
                    }
                })
            },
            getTableList() {
                get("database/getTableList", {}).then(resp => {
                    if (resp.result) {
                        this.tableList = resp.data
                    }
                })
            },
            createFile() {
                let tableList = this.checkedTables;
                let tableStr = "";
                for (let i in tableList) {
                    let table = tableList[i];
                    tableStr += ("," + table);
                }
                this.createInfo.tableList = tableStr.substring(1);
                if (this.createInfo.tableList.length < 1) {
                    this.$notify.error({
                        title: '错误',
                        message: '至少选择一张表！'
                    });
                    return;
                }
                post("/create/create", this.createInfo).then(resp => {
                    if (resp.result) {
                        this.$notify({
                            title: '成功',
                            message: '创建文件成功！',
                            type: 'success'
                        });
                    } else {
                        this.$notify.error({
                            title: '错误',
                            message: '创建文件失败！'
                        });
                    }
                })
            },
            getTemplates() {
                get("/template/getTemplates", {folderPath : this.createInfo.templatePath}).then(resp => {
                    if (resp.result) {
                        this.tptList = resp.data;
                    } else {
                        this.$notify.error({
                            title: '错误',
                            message: '获取模板文件失败！'
                        });
                    }
                })
            }
        },
        beforeMount() {
        }
    }
</script>

<style scoped>
    #root {
        height: 100%;
        width: 100%;
    }
    .tptItem {
        display: inline-block;
        width: 500px;
        border: 1px solid gray;
        border-radius: 10px;
        padding: 5px 5px 5px 15px;
        margin: 4px;
        height: 50px;
        line-height: 50px;
    }
</style>